<template>
  <div class="inspectAdd">
    <el-dialog
      :title="pid?'编辑':'新增'"
      :visible.sync="centerDialogVisible"
      width="65%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
      
      >
      <div style="max-width:1000px;margin:auto;">
      <p class="shenqing">标准信息</p>
      <table border="1" rules="all" class="tablestyle">
         <tr>
          <td style="width: 164px;text-align: center;">标准名称</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input v-model="shenqingxinxi.standardName" placeholder=""></el-input>
          </td>
        </tr>
         <tr>
          <td style="width: 164px;text-align: center;">适用公司</td>
          <td  colspan="3"  class="beizhu">
            <treeSelect style="width:100%" :model="shenqingxinxi.deptName" @department="suoshubum" type="department" v-if="centerDialogVisible"></treeSelect>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 34px;text-align: center;">标准类型</td>
          <td style="width:260px">
            <el-select style="width: 100%" v-model="shenqingxinxi.standardType" placeholder="请选择" >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </td>
          <td style="width: 164px;height: 34px;text-align: center;">设备分类</td>
          <td style="width:240px">
                <treeSelect v-show="shenqingxinxi.standardType==3" @deviceType="fenleibum" type="deviceType"></treeSelect>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 53px;text-align: center;">要求</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="shenqingxinxi.require">
            </el-input>
          </td>
        </tr>
         <tr>
          <td style="width: 164px;height: 53px;text-align: center;">备注</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="shenqingxinxi.remark">
            </el-input>
          </td>
        </tr>
      </table>
      <div v-show="shenqingxinxi.standardType==2">
        <p class="shenqing">关联设备</p>
        <div style="margin-left: 15px;margin-bottom: 15px">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addShow=true">添加</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="devDel">删除</el-button>
        </div>
        <el-table :data="shenqingxinxi.devicePollingStandardEquipmentsList" @selection-change="devChange" border>
          <el-table-column align="center" type="selection" width="80"></el-table-column>
          <el-table-column align="center" type="index" label="序号"  width="55"  />
          <el-table-column align="center" label="设备编号" property="deviceCode"/>
          <el-table-column align="center" label="名称" property="deviceName"/>
          <el-table-column align="center" label="品牌" property="deviceBrandsName"/>
          <el-table-column align="center" label="类别" property="deviceTypeName"/>
          <el-table-column align="center" label="规格型号" property="deviceModel"/>
        </el-table>
      </div>
      <p class="shenqing">点检项目</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="">导入</el-button>
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="saveBtn">保存</el-button>
      </div>

      <el-table  :data="shenqingxinxi.deviceSpotCheckProjectVoList" stripe style="margin-left: 15px;"
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="项目" property="projectName" width="200" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.projectName" placeholder=""></el-input>
          </template>

        </el-table-column>
        <el-table-column align="center" label="点检方法及基准" property="spotCheckMethod"  >
          <template slot-scope="scope">
            <el-input v-model="scope.row.spotCheckMethod" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" property="spotCheckType" :show-overflow-tooltip="true" width="150" >
          <template slot-scope="scope">
           <el-select v-model="scope.row.spotCheckType" placeholder="请选择" >
              <el-option
                v-for="item in optionsdanwei"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="下限"  property="lowerLimit" width="150" >
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.lowerLimit" placeholder="" ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="上限" property="upperLimit" align="center" width="150">
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.upperLimit" placeholder=""  ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="可选项" property="options" width="150" >
           <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.options" placeholder=""  ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="正常选项"  property="normalOptions"  >
         <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.normalOptions" placeholder=""  ></el-input>
          </template></el-table-column>
        <el-table-column align="center" label="文档及图片"  property="dqjd" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <el-upload
              :action="baseUrl()+'/common/upload'"
              :on-success="fileSuccess"
              :show-file-list="true"
              :headers="headers"
            >
              <el-button size="mini" type="warning" icon="el-icon-folder-add" @click="shangchjun(scope.$index)">上传</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-dialog>
    <addDialog v-if="addShow" @selectChange="addSelect"></addDialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import treeSelect from '@/views/equipmentGL/equipmentTZ/treeSelect'
  import addDialog from '@/views/equipmentDisposition/equipmentScrapping/addDialog'
  import { getToken } from '@/utils/auth'
  export default {
    name: "Role",
    props:['pid'],
    components:{
      treeSelect,
      addDialog
    },
    data() {
      return {
        centerDialogVisible:true,
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        addShow:false,
        devFlagList:[],
        statusOptions: [
          { value: '1',label: '通用'},
          { value: '2',label: '按设备'},
          { value: '3',label: '按分类'},
        ],
        deptOptions: undefined,
        addshow:false,
        transmitData:{},//传给子集的数据
        shuliangSum:0,//总数量
        jinesum:0,//总金额
        tableDataxunz:'',
        dialogVisible:false,
        optionsleixing:[
          {value:'1',label:'设备采购'},
          {value:'2',label:'备件消耗材料采购'}
        ],//类型数据
        optionscgzq:[//采购周期
          {value:'1',label:'年'},
          {value:'2',label:'季'},
          {value:'3',label:'月'}
        ],
        //单位数据
        optionsdanwei:[
          {value:'1',label:'数值'},
          {value:'2',label:'文本'},
        ],
        //总数居
        shenqingxinxi:{
          "deptId": 0,
          "devicePollingStandardEquipmentsList": [],
          "deviceSpotCheckProjectVoList": [
            {
              "annexList": [],
              "id": 0,
              "lowerLimit": "",
              "normalOptions": "",
              "options": "",
              "pollingStandardId": 0,
              "projectName": "",
              "spotCheckMethod": "",
              "spotCheckType": "1",
              "upperLimit": ""
            }
          ],
          "deviceType": 0,
          "id": 0,
          "remark": "",
          "require": "",
          "standardName": "",
          "standardType": ""
        },
        tableDatajihuaXZ:[],//选中的数据
        xiaobiao:0,
      };
    },

    created() {
      if(this.pid){
        this.shenqingxinxi.id =this.pid
        this.getTaskList()
      }

    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      devChange(row){
        this.devFlagList = row
      },
      devDel(){
        this.devFlagList.forEach((i)=>{
          this.shenqingxinxi.devicePollingStandardEquipmentsList.forEach((j,index)=>{
            if(i==j){
              this.shenqingxinxi.devicePollingStandardEquipmentsList.splice(index,1)
            }
          })
        })
      },
      addSelect(data){
        if(data&&data.length>0){
          debugger
          data.forEach(i => {
            i.deviceId=i.id
            delete i.id
          })
          this.shenqingxinxi.devicePollingStandardEquipmentsList=data
          // this.addData=this.addData.concat(data)
          // this.addForm.deviceScrapDeviceDetailsNewVoList=data
        }
        this.addShow=false
      },
      getTaskList() {
        request({
          url: '/device/devicePollingStandard/' + this.pid,
          method: 'get',
        }).then(response => {
          this.shenqingxinxi = response.data
        });
      },
      //点击上传
      shangchjun:function(row){
        console.log('点击上传',row)
        this.xiaobiao = row
      },
      fileSuccess(res) {
        //文件上传成功
        console.log('文件上传成功',res)
        // this.shenqingxinxi.deviceSpotCheckProjectVoList.annexList[this.xiaobiao].push({ accessoryName: res.fileName, accessoryUrl: res.filePath})
        this.shenqingxinxi.deviceSpotCheckProjectVoList[this.xiaobiao].annexList.push({fileName:res.fileName,filePath:res.filePath})
      },
      //设备分类
      fenleibum(data){
        console.log('11122',data)
        this.shenqingxinxi.deviceType = data.id
      },
      //适用公司
      suoshubum(data) {
        console.log('11122',data)
        this.shenqingxinxi.deptId = data.id
        this.shenqingxinxi.deptName=data.label
      },

      //附件删除
      handleChange(file, annexList) {
        this.annexList = annexList.slice(-3);
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

      },
      //添加
      add:function () {
        console.log('添加')
        var indexSun = this.shenqingxinxi.deviceSpotCheckProjectVoList.length
        this.shenqingxinxi.deviceSpotCheckProjectVoList.push(
          {
            "annexList": [
              {
                "createBy": "",
                "createDate": "",
                "createTime": "",
                "dataScope": "",
                "encryptionRank": 0,
                "fileName": "",
                "filePath": "",
                "fileType": 0,
                "id": 0,
                "modifyUser": 0,
                "params": {},
                "relationId": 0,
                "remark": "",
                "searchValue": "",
                "typeDistinguish": 0,
                "typeId": 0,
                "updateBy": "",
                "updateTime": ""
              }
            ],
            "id": 0,
            "lowerLimit": "",
            "normalOptions": "",
            "options": "",
            "pollingStandardId": 0,
            "projectName": "",
            "spotCheckMethod": "",
            'spotCheckType':'1',
            "upperLimit": ""
          }
        )

      },

      //删除
      deleteBtn:function () {
        for (var i=0;i< this.shenqingxinxi.deviceSpotCheckProjectVoList.length;i++){
          for(var j=0;j<this.tableDatajihuaXZ.length;j++){
            if(this.shenqingxinxi.deviceSpotCheckProjectVoList[i].id==this.tableDatajihuaXZ[j].id){//相等
              this.shenqingxinxi.deviceSpotCheckProjectVoList.splice(i,1)
            }

          }
        }
      },
      //保存
      saveBtn:function () {
        if(this.pid){
          request({
            url: '/device/devicePollingStandard/update',
            method: 'put',
            data:this.shenqingxinxi
          }).then(response => {
            this.loading = false
            this.$message({
              type: 'success',
              message: response.msg
            });
            // this.$router.push('/inspectionGL/inspectionBZ')
            this.$emit('subSetChane',1)
          });
        }else{
          request({
            url: '/device/devicePollingStandard/save',
            method: 'post',
            data:this.shenqingxinxi
          }).then(response => {
            this.loading = false
            this.$message({
              type: 'success',
              message: response.msg
            });
            // this.$router.push('/inspectionGL/inspectionBZ')
            this.$emit('subSetChane',1)
          });
        }
        

      },
    }
  };
</script>
<style lang="scss">
.inspectAdd{
  .dialog .el-dialog__body{
      height: 75vh;
      overflow: scroll;
  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    width: 100%;
  }
  .tablestyle .el-input--medium .el-input__inner {
    border: none;
  }
  .leixing .el-select{
    width: 100%;
  }
  .caigoustyle {
    width: 100%;

  }
  .beizhu .el-textarea__inner {
    border: none;
  }
}

</style>
